import QtQuick 1.1
import com.nokia.meego 1.0
import "Logic.js" as Logic
import cppGraphMonitor 1.0

Page {
    id: pageNetworkMonitor
    anchors.margins: 3
    orientationLock: appWindow.lockOrientation()

    property string curr_iface_monitor: cppSelectedIfaceMonitor

    tools: ToolBarLayout {
        visible: true
        ToolIcon { iconId: "toolbar-back"; onClicked: { pageStack.pop(); } }
        ToolIcon {
            id: monitorStartStopButton
            iconId: "toolbar-mediacontrol-play"
            smooth: true
            onClicked: {
                startMonitor()
            }
        }
        ToolIcon {
            id: imgGear
            iconId: "toolbar-settings"
            smooth: true
            onClicked: {
                monitorGraph.initSettings()
                sheetPageOptMonitor.open()
            }
        }
        ToolIcon {
            id: showAdvPaneIcon
            anchors.verticalCenter: parent.verticalCenter
            iconId: "toolbar-up"
            smooth: true
            states: [
                State {
                    name: "rotated"
                    PropertyChanges { target: showAdvPaneIcon; rotation: 180; }
                },
                State {
                    name: "rotated_back"
                    PropertyChanges { target: showAdvPaneIcon; rotation: 0; }
                }
            ]
            transitions: Transition {
                RotationAnimation {
                    duration: 400;
                    direction: RotationAnimation.Counterclockwise
                }
            }
            onClicked: {
                if ( (showAdvPaneIcon.state == "rotated_back") || (showAdvPaneIcon.state == "") ) {
                    showAdvPaneIcon.state = "rotated"
                } else {
                    showAdvPaneIcon.state = "rotated_back"
                }
                showAdvancePane()
            }
        }

    }

    /***************************************************/

    function showAdvancePane( ) {
        var isShow = advancePane.visible
        if( isShow ) {
            advancePane.visible = false
            advancePane.opacity = 0
        } else {
            advancePane.visible = true
            advancePane.opacity = 1
        }
    }

    function startMonitor( ) {
        if ( monitorGraph.isWork == false ) {
            monitorStartStopButton.iconId = "toolbar-mediacontrol-stop"
            monitorGraph.timerStart()
        } else {
            monitorStartStopButton.iconId = "toolbar-mediacontrol-play"
            monitorGraph.timerStop()
        }
    }



    /***************************************************/

    Column {
        anchors.fill: parent
        anchors.centerIn: parent
        spacing: 2

        Rectangle {
            id: graph
            height: advancePane.visible ? parent.height-advancePane.height-2 : parent.height
            width: parent.width
            radius: 10
            color: "black"
            Behavior on height { NumberAnimation { duration: 350;  } }
            GraphMonitor {
                id: monitorGraph
                width: parent.width
                height: parent.height
                anchors.centerIn: parent.centerIn
                onChangeValueParam: changeValueParamOnPane()
            }
        }

        //--------------------//
        Rectangle {
            id: advancePane
            z: 1

            radius: 10
            property int heightPane: 80
            height: heightPane
            width: parent.width
            opacity: 0
            Behavior on opacity { NumberAnimation { duration: 700 } }
            visible: false
            smooth: true
            gradient: Gradient {
                GradientStop { position: 0; color: mytheme.grColor2 }
                GradientStop { position: 1; color: mytheme.grColor3 }
            }
            border.color: mytheme.pageTitleAreaColor

            Row {
                id: rowRX
                height: parent.height/2
                width: parent.width
                anchors.top: parent.top
                Label {
                    anchors.verticalCenter: parent.verticalCenter
                    width: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 7 : 20
                    text: ""
                }
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    //source: "image://theme/icon-m-transfer-download"
                    source: "pictures/arrowRX.png"
                    height: 33
                    width: 35
                }
                Label {
                    anchors.verticalCenter: parent.verticalCenter
                    width: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 10 : 20
                    text: ""
                }
                Label {
                    width: parent.width/3 - 10
                    anchors.verticalCenter: parent.verticalCenter
                    id: lblSpeedRXvalue
                    text: "0.00 kB/s"
                }
                Label {
                    id: lblTraffRXvalue
                    anchors.verticalCenter: parent.verticalCenter
                    width: parent.width/3 - 20
                    text: "0.00 kB"
                }
                Rectangle {
                    id: legendRX;
                    anchors.verticalCenter: parent.verticalCenter
                    color: monitorGraph.colorRX;
                    height: parent.height-5;
                    width: parent.height-5;
                    radius: parent.height/2-5
                }
                Label {
                    anchors.verticalCenter: parent.verticalCenter
                    width: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 10 : 20
                    text: ""
                }
                Label {
                    anchors.verticalCenter: parent.verticalCenter
                    text: qsTr("Input")
                }
            }

            Row {
                id: rowTX
                height: parent.height/2
                width: parent.width
                anchors.top: rowRX.bottom
                Label {
                    anchors.verticalCenter: parent.verticalCenter
                    width: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 7 : 20
                    text: ""
                }
                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    //source: "image://theme/icon-m-transfer-upload";
                    source: "pictures/arrowTX.png"
                    height: 33
                    width: 35
                }
                Label {
                    anchors.verticalCenter: parent.verticalCenter
                    width: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 10 : 20
                    text: ""
                }
                Label {
                    id: lblSpeedTXvalue;
                    width: parent.width/3 - 10
                    anchors.verticalCenter: parent.verticalCenter
                    text: "0.00 kB/s"
                }
                Label {
                    id: lblTraffTXvalue
                    width: parent.width/3 - 20
                    anchors.verticalCenter: parent.verticalCenter
                    text: "0.00 kB"
                }
                Rectangle {
                    id: legendTX;
                    anchors.verticalCenter: parent.verticalCenter
                    color: monitorGraph.colorTX;
                    height: parent.height-5;
                    width: parent.height-5;
                    radius: parent.height/2-5
                }
                Label {
                    anchors.verticalCenter: parent.verticalCenter
                    width: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 10 : 20
                    text: ""
                }
                Label {
                    anchors.verticalCenter: parent.verticalCenter
                    text: qsTr("Output")
                }
            }

            //=================================//

        } //Rectangle
    } //Column

    /*-------------------------------------------------*/
    function changeValueParamOnPane() {
        lblSpeedRXvalue.text = monitorGraph.speedRX
        lblSpeedTXvalue.text = monitorGraph.speedTX
        lblTraffRXvalue.text = monitorGraph.traffRX
        lblTraffTXvalue.text = monitorGraph.traffTX
    }
    /*-------------------------------------------------*/


    //********* НАСТРОЙКИ ***********//

    /*****************************************************/

    Sheet {
        id: sheetPageOptMonitor

        acceptButtonText: qsTr("Save")
        rejectButtonText: qsTr("Cancel")

        content: Flickable {
            z: 1
            anchors.fill: parent
            anchors.leftMargin: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 20 : 50
            anchors.rightMargin: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 20 : 50
            anchors.topMargin: 20
            anchors.bottomMargin: 20
            contentWidth: col2.width
            contentHeight: col2.height
            flickableDirection: Flickable.VerticalFlick

            Column {
                id: col2
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: 20
                width: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 440 : 750

                //------------------------------//
                Label {
                    text: qsTr("Network interfaces for monitoring:") +" " + curr_iface_monitor
                }

                //------------------------------//
                ListView {
                    id: listViewIfaceMonitor
                    clip: true
                    anchors.left: parent.left
                    height: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 250 : 170
                    width: parent.width// - 150

                    //описание пункта меню
                    Component {
                        id: ifaceMonitorItemDelegate
                        Item {
                            id: ifaceItemWrapper
                            signal clicked
                            property alias pressed: mouseAreaItemIface.pressed
                            width: listViewIfaceMonitor.width
                            height: 90

                            Image {
                                id: imgIface
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.left: parent.left
                                source: ifacePicture
                            }

                            Text {
                                id: textInfoIface
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.left: imgIface.right
                                anchors.leftMargin: 10
                                text: ifaceName;
                                font.pixelSize: 30;
                                color: mytheme.fontMainColor
                            }

                            states: State {
                                name: "Current"
                                when: ifaceItemWrapper.ListView.isCurrentItem
                                PropertyChanges { target: ifaceItemWrapper; x: 20 }
                                PropertyChanges { target: textInfoIface; color: mytheme.fontAltColor }
                            }

                            transitions: Transition {
                                NumberAnimation { properties: "x"; duration: 200 }
                            }

                            MouseArea {
                                id: mouseAreaItemIface;
                                anchors.fill: parent
                                onClicked: {
                                    parent.ListView.view.currentIndex = index
                                    ifaceItemWrapper.clicked();
                                    curr_iface_monitor = ifaceName
                                }
                            }
                        } //Item
                    } //Component

                    //компонент подсветки пункта меню
                    Component {
                        id: ifaceItemHighlight
                        Rectangle {
                            height: 90
                            width: listViewIfaceMonitor.width
                            gradient: Gradient {
                                GradientStop { position: 0; color: mytheme.grColor2 }
                                GradientStop { position: 1; color: mytheme.grColor3 }
                            }
                            border.color: mytheme.pageTitleAreaColor
                            radius: 10
                            y: listViewIfaceMonitor.currentItem.y;
                            //Behavior on y { SpringAnimation { spring: 3; damping: 0.1 } }
                            Behavior on y { SmoothedAnimation { velocity: 500 } }
                        }
                    }

                    model: listIfacesMonitor
                    delegate: ifaceMonitorItemDelegate
                    highlight: ifaceItemHighlight
                    highlightFollowsCurrentItem: true
                    focus: true
                    currentIndex: cppSelectedIndexIfacesMonitor

                } //ListView

                //------------------------------//

                Button {
                    id: bRefreshInterval
                    text: qsTr("Refresh interval") + ":  " + dlgRefreshInterval.model.get(dlgRefreshInterval.selectedIndex).name
                    iconSource: theme.inverted === false ? "image://theme/icon-m-common-clock" : "image://theme/icon-m-common-clock-inverse"
                    width: parent.width
                    height: 80
                    onClicked: {
                        dlgRefreshInterval.open()
                    }
                }
                //------------------------------//

                Item {
                    height: 80
                    width: parent.width

                    states: [
                        State {
                            name: "on"
                            when: ( swGraphInput.checked == true )
                            PropertyChanges { target: imgInput; opacity: 1; }
                            PropertyChanges { target: lblInput; opacity: 1; }
                        },
                        State {
                            name: "off"
                            when: ( swGraphInput.checked == false )
                            PropertyChanges { target: imgInput; opacity: 0.4; }
                            PropertyChanges { target: lblInput; opacity: 0.4; }
                        }
                    ]
                    transitions: Transition { NumberAnimation { properties: "opacity"; duration: 750 } }

                    Image {
                        id: imgInput
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        source: "image://theme/icon-m-transfer-download"
                    }
                    Label {
                        id: lblInput
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: imgInput.right
                        anchors.leftMargin: 10
                        text: qsTr("Graph input")
                    }
                    Switch {
                        id: swGraphInput
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        anchors.leftMargin: 20
                        checked: monitorGraph.showRX// === 1 ? true : false
                    }
                }

                 //------------------------------//

                Item {
                    height: 80
                    width: parent.width

                    states: [
                        State {
                            name: "on"
                            when: ( swGraphOutput.checked == true )
                            PropertyChanges { target: imgOutput; opacity: 1; }
                            PropertyChanges { target: lblOutput; opacity: 1; }
                        },
                        State {
                            name: "off"
                            when: ( swGraphOutput.checked == false )
                            PropertyChanges { target: imgOutput; opacity: 0.4; }
                            PropertyChanges { target: lblOutput; opacity: 0.4; }
                        }
                    ]
                    transitions: Transition { NumberAnimation { properties: "opacity"; duration: 750 } }

                    Image {
                        id: imgOutput
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        source: "image://theme/icon-m-transfer-upload"
                    }
                    Label {
                        id: lblOutput
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: imgOutput.right
                        anchors.leftMargin: 10
                        text: qsTr("Graph output")
                    }
                    Switch {
                        id: swGraphOutput
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        anchors.leftMargin: 20
                        checked: monitorGraph.showTX// === 1 ? true : false
                    }
                }

                //------------------------------//
                ButtonRow {
                    id: rowTypeGraph
                    exclusive: true
                    width: parent.width
                    //anchors.horizontalCenter: parent.horizontalCenter
                    anchors.right: parent.right
                    anchors.left: parent.left
                    states: [
                        State {
                            name: "stat"
                            when: ( pbGraphStat.checked == true )
                            PropertyChanges { target: pbGraphLine; opacity: 0.35; }
                        },
                        State {
                            name: "line"
                            when: (pbGraphLine.checked == true)
                            PropertyChanges { target: pbGraphStat; opacity: 0.35; }
                        }
                    ]
                    transitions: Transition { NumberAnimation { properties: "opacity"; duration: 750 } }
                    Button {
                        height: 85
                        width: parent.width/2
                        id: pbGraphStat
                        text: ""
                        iconSource: "pictures/graphStat.png"
                        checked: monitorGraph.typeGraph === 0 ? true : false
                    }
                    Button {
                        height: 85
                        width: parent.width/2
                        id: pbGraphLine
                        text: ""
                        iconSource: "pictures/graphLine.png"
                        checked: monitorGraph.typeGraph === 1 ? true : false
                    }
                }
                //------------------------------//
                ButtonRow {
                    id: rowColorGraph
                    exclusive: false
                    width: parent.width
                    anchors.right: parent.right
                    anchors.left: parent.left
                    MyButton {
                        color1: monitorGraph.colorRX
                        color2: monitorGraph.colorRX
                        imgButton: "image://theme/icon-s-transfer-download"
                        imgButtonPress: "image://theme/icon-s-transfer-download"
                        labelSize: 22
                        height: 85
                        width: parent.width/2
                        id: pbColorRX
                        label: qsTr("In")
                        onButtonClick: {
                            colorSelectionRX.open()
                        }
                    }
                    MyButton {
                        color1: monitorGraph.colorTX
                        color2: monitorGraph.colorTX
                        imgButton: "image://theme/icon-s-transfer-upload"
                        imgButtonPress: "image://theme/icon-s-transfer-upload"
                        labelSize: 22
                        height: 85
                        width: parent.width/2
                        id: pbColorTX
                        label: qsTr("Out")
                        onButtonClick: {
                            colorSelectionTX.open()
                        }
                    }
                }

                //------------------------------//
                Button {
                    id: bTimestamp
                    text: qsTr("Timestamp") + ":  " + dlgSelectTimestamp.model.get(dlgSelectTimestamp.selectedIndex).name
                    iconSource: theme.inverted === false ? "image://theme/icon-m-common-clock" : "image://theme/icon-m-common-clock-inverse"
                    width: parent.width
                    height: 80
                    onClicked: {
                        dlgSelectTimestamp.open()
                    }
                }

                //------------------------------//

            } //Column

        } //Flickable

        onAccepted: saveSettings()
    } // Sheet


    //сохранение настроек
    function saveSettings( ) {
        var refrInt = dlgRefreshInterval.selectedIndex
        monitorGraph.refresh = (refrInt+1)

        monitorGraph.showRX = swGraphInput.checked

        monitorGraph.showTX = swGraphOutput.checked

        var tSt = dlgSelectTimestamp.selectedIndex
        monitorGraph.timestamp = (tSt+1)*10

        monitorGraph.typeGraph = (pbGraphStat.checked == true) ? 0 : 1

        monitorGraph.ifaceMonitor = curr_iface_monitor

        monitorGraph.saveSettings()
    }
    /*****************************************************/


    SelectionDialog {
        id: dlgSelectTimestamp
        titleText: qsTr("Timestamp")
        selectedIndex: (monitorGraph.timestamp/10-1)

        model: ListModel {
            ListElement { name: "10 seconds" }
            ListElement { name: "20 seconds" }
            ListElement { name: "30 seconds" }
            ListElement { name: "40 seconds" }
            ListElement { name: "50 seconds" }
            ListElement { name: "60 seconds" }
        }
    }

    SelectionDialog {
        id: dlgRefreshInterval
        titleText: qsTr("Refresh interval")
        selectedIndex: (monitorGraph.refresh-1)

        model: ListModel {
            ListElement { name: "1 second" }
            ListElement { name: "2 seconds" }
            ListElement { name: "3 seconds" }
            ListElement { name: "4 seconds" }
            ListElement { name: "5 seconds" }
        }
    }

    //======================================

    DialogColorSelection {
        id: colorSelectionRX
        onSelectedColor: {
            pbColorRX.color1 = colorSelectionRX.color
            pbColorRX.color2 = colorSelectionRX.color
            monitorGraph.colorRX = colorSelectionRX.color
        }
    }

    DialogColorSelection {
        id: colorSelectionTX
        onSelectedColor: {
            pbColorTX.color1 = colorSelectionTX.color
            pbColorTX.color2 = colorSelectionTX.color
            monitorGraph.colorTX = colorSelectionTX.color
        }
    }

}

